<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:richext="http://java.sun.com/jsf/composite/richext">

	<ui:composition template="/template/pPrincipal.xhtml">

		<ui:define name="head">
			<title>BBVAITrade</title>
		</ui:define>

		<ui:define name="titulopagina">
			<p:toolbar>
				<p:toolbarGroup align="left" style="height: 20px;">
					<h:outputText value="CONSULTA VISTA PRODUCTO"
						styleClass="textoTituloPagina" />
				</p:toolbarGroup>
			</p:toolbar>
		</ui:define>

		<ui:define name="bodyarea">
			<style type="text/css" > 
				.stylePanelFiaImpoExpo td {
				    vertical-align: top;
				}
				
				.styleTreeFiaImpoExpo {
					width: 350px;
				}
			</style>
			<p:messages id="growl" ></p:messages>
			<f:event type="preRenderView" listener="#{financiamientoController.onPageLoad}"/>
			<p:tabMenu activeIndex="2">
				<p:menuitem value="Medios de Pago" ajax="true"
					url="/pages/producto/medioDePago.xhtml" icon="ui-icon-circle-check" />
				<p:menuitem value="Productos Comex" ajax="true"
					url="/pages/producto/productosComex.xhtml"
					icon="ui-icon-circle-check" />
				<p:menuitem value="Financiamiento" ajax="true"
					url="/pages/producto/financiamientos.xhtml"
					icon="ui-icon-circle-check" />
				<p:menuitem value="Tablero FIA Vencimiento" ajax="true"
					url="/pages/producto/tablero.xhtml" icon="ui-icon-circle-check" />
			</p:tabMenu>
			<t:div style="text-align: right;">
		        <p:commandLink id="btnDowloadXLS" actionListener="#{financiamientoController.exportDocument('XLS')}" ajax="false" style="margin-right:20px;" title="Descargar XLS">  
					<p:graphicImage value="/imagenes/iconos/excel.gif" style="border:0;" ></p:graphicImage>
				</p:commandLink> 
				<p:commandLink id="btnDowloadPDF" actionListener="#{financiamientoController.exportDocument('PDF')}" ajax="false" style="margin-right:20px;" title="Descargar PDF">  
					<p:graphicImage value="/imagenes/iconos/pdf.png" style="border:0;" ></p:graphicImage>
				</p:commandLink>
			</t:div>
			<p:accordionPanel multiple="true" activeIndex="0,3,4" id="idContentMain">
				<p:tab title="Filtros de Vista Producto">
					<h:panelGrid columns="6" style="margin-top: -30px">
						<p:spacer width="100" height="15" ></p:spacer>
						<p:spacer width="190" height="15" ></p:spacer>
						<p:spacer width="90" height="15" ></p:spacer>
						<p:spacer width="170" height="15" ></p:spacer>
						<p:spacer width="70" height="15" ></p:spacer>
						<p:spacer width="150" height="15" ></p:spacer>

						<h:outputText value="Buscar cliente por:" styleClass="texto" />
						<p:selectOneMenu value="#{comunController.tipoDocSeleccionado}" effect="fade" converter="tipoDocumentoConverter">
				            <f:selectItems value="#{comunController.listTipoDocumento}"/>
				        </p:selectOneMenu>

						<h:outputText value="Fecha Desde:" styleClass="texto" />
						<p:calendar value="#{financiamientoController.financiamientoForm.inFechaDesde}" locale="es" showButtonPanel="false" showOn="button"  pattern="dd/MM/yyyy" size="10" maxlength="10">
						 	<p:ajax event="dateSelect" listener="#{financiamientoController.validateDateDateSelect}" update=":formPrincipal:growl"/> 
							<p:ajax event="change" listener="#{financiamientoController.validateDateChange}" update=":formPrincipal:growl"/>
						</p:calendar>

						<h:outputText value="Fecha Hasta:" styleClass="texto" />
						<p:calendar value="#{financiamientoController.financiamientoForm.inFechaHasta}" locale="es" showButtonPanel="false" showOn="button"  pattern="dd/MM/yyyy" size="10" maxlength="10">
							<p:ajax event="dateSelect" listener="#{financiamientoController.validateDateDateSelect}" update=":formPrincipal:growl"/> 
							<p:ajax event="change" listener="#{financiamientoController.validateDateChange}" update=":formPrincipal:growl"/>
						</p:calendar>

						<h:outputText value="Valor de busqueda:" styleClass="texto" />
						<h:inputText value="#{financiamientoController.financiamientoForm.inValorBuscarCliente}" styleClass="cajaST" style="width:85%"></h:inputText>

						<h:outputText value="Tipo de Operación:" styleClass="texto" />
						<p:selectOneMenu value="#{comunController.tipoOperacionSeleccionado}" effect="fade" converter="multiTablaConverter">  
				            <f:selectItems value="#{comunController.listTipoOperacion}"/>
				            <p:ajax listener="#{financiamientoController.updateArbolClasesCheck}" update=":formPrincipal:idContentMain:checkboxTreeImpo,:formPrincipal:idContentMain:checkboxTreeExpo"/>
				        </p:selectOneMenu>

						<h:outputText value="" />
						<p:commandButton value="Buscar" id="btnBuscar" update=":formPrincipal:idContentMain:idPanelResumen,:formPrincipal:idContentMain:tabDetOper" actionListener="#{financiamientoController.buscarFinanciamientoAction}"/>
					</h:panelGrid>
				</p:tab>
				
				<p:tab title="Seleccion de Clases">
					<h:panelGrid columns="5" width="100%" styleClass="stylePanelFiaImpoExpo">
						<p:spacer width="30px" height="10"></p:spacer>
						<p:tree value="#{financiamientoController.arbolClaseFiaImpo}" var="node" id="checkboxTreeImpo"  
					            selectionMode="checkbox"  
					            selection="#{financiamientoController.selectedNodeClaseFiaImpo}"
					            styleClass="styleTreeFiaImpoExpo">
					        <p:treeNode>
					            <h:outputText value="#{node.descripcion}" />
					        </p:treeNode>
					    </p:tree>
					    <p:spacer width="60px" height="10"></p:spacer>
					    <p:tree value="#{financiamientoController.arbolClaseFiaExpo}" var="node" id="checkboxTreeExpo"  
					            selectionMode="checkbox"  
					            selection="#{financiamientoController.selectedNodeClaseFiaExpo}"
					            styleClass="styleTreeFiaImpoExpo">
					        <p:treeNode>
					            <h:outputText value="#{node.descripcion}" />
					        </p:treeNode>
					    </p:tree>
					    <p:spacer width="30px" height="10"></p:spacer>
					    <h:outputText value=""></h:outputText>
					    <h:outputText value=""></h:outputText>
						<t:div style="text-align: center;">
							<p:commandButton value="Guardar Selección de Clases" ></p:commandButton>
						</t:div>
						<h:outputText value=""></h:outputText>
						<h:outputText value=""></h:outputText>
					</h:panelGrid>
				</p:tab>
				<p:tab title="Búsqueda Avanzada">
					<h:panelGrid columns="6" style="margin-top: -20px">
						<p:spacer width="70" height="15" ></p:spacer>
						<p:spacer width="220" height="15" ></p:spacer>
						<p:spacer width="70" height="15" ></p:spacer>
						<p:spacer width="250" height="15" ></p:spacer>
						<p:spacer width="50" height="15" ></p:spacer>
						<p:spacer width="200" height="15" ></p:spacer>

						<h:outputText value="Moneda:" styleClass="texto"></h:outputText>
						<p:autoComplete value="#{comunController.monedaSeleccionado}" completeMethod="#{comunController.completarMoneda}" forceSelection="true"
							var="moneda" itemLabel="#{moneda.descripcion}" itemValue="#{moneda}" converter="monedaConverter" dropdown="true"/>

						<h:outputText value="País:" styleClass="texto" />
						<p:autoComplete value="#{comunController.paisSeleccionado}" completeMethod="#{comunController.completarPais}" forceSelection="true"
							var="pais" itemLabel="#{pais.descripcion}" itemValue="#{pais}" converter="paisConverter" dropdown="true">
						</p:autoComplete>

						<h:outputText value="Situación:" styleClass="texto" />
						<p:selectOneMenu value="#{comunController.situacionSeleccionado}" effect="fade" converter="multiTablaConverter" style="width: 100%;">
				            <f:selectItems value="#{comunController.listSituacion}"/>
				        </p:selectOneMenu>

						<h:outputText value="Monto Desde:" styleClass="texto"></h:outputText>
						<h:panelGrid columns="3" cellpadding="0" cellspacing="0">
							<h:inputText value="#{financiamientoController.financiamientoForm.inMontoDesde}" styleClass="cajaST" style="width:140px; text-align:right;" onkeypress="if(event.which &lt; 48 || event.which &gt; 57) return false;" id="idMontoDesde">
								<f:convertNumber pattern="#,##0" locale="US"/>
								<p:ajax event="change" listener="#{financiamientoController.validateRangoMonto}" update=":formPrincipal:growl,:formPrincipal:idContentMain:idMontoDesde"/>
							</h:inputText>
							<richext:spacer width="5"></richext:spacer>
							<h:outputText value="(en USD)" styleClass="textoRojo"></h:outputText>
						</h:panelGrid>

						<h:outputText value="Monto Hasta:" styleClass="texto"></h:outputText>
						<h:panelGrid columns="3" cellpadding="0" cellspacing="0">
							<h:inputText value="#{financiamientoController.financiamientoForm.inMontoHasta}" styleClass="cajaST" style="width:140px; text-align:right;" onkeypress="if(event.which &lt; 48 || event.which &gt; 57) return false;" id="idMontoHasta">
								<f:convertNumber pattern="#,##0" locale="US"/>
								<p:ajax event="change" listener="#{financiamientoController.validateRangoMonto}" update=":formPrincipal:growl,:formPrincipal:idContentMain:idMontoHasta"/>
							</h:inputText>
							<richext:spacer width="5"></richext:spacer>
							<h:outputText value="(en USD)" styleClass="textoRojo"></h:outputText>
						</h:panelGrid>
					</h:panelGrid>
				</p:tab>
				<p:tab title="Resultados" id="idTabResumen">
					<h:panelGrid columns="3" width="100%" id="idPanelResumen" styleClass="stylePanelFiaImpoExpo">		
						<p:treeTable value="#{financiamientoController.rootImp}" var="document">						  
							<p:column style="width:270px">
								<f:facet name="header">Clase</f:facet>
					            <f:facet name="footer">Total (Import)</f:facet>  
					            <h:outputText value="#{document.descClase}" styleClass="columnTextoCeleste"/>  
					        </p:column>  
					        <p:column style="width:70px;" styleClass="columnNumero">  
					            <f:facet name="header"># Oper</f:facet>
					            <f:facet name="footer">
					            	<h:outputText value="#{financiamientoController.footerImp.totOper}">
							        	<f:convertNumber pattern="#,##0" locale="US"/>
							        </h:outputText>
					            </f:facet>
					            <h:outputText value="#{document.totOper}">
							    	<f:convertNumber pattern="#,##0" locale="US"/>
							    </h:outputText>  
					        </p:column>  
					        <p:column style="width:100px" styleClass="columnNumero">
					            <f:facet name="header">Monto</f:facet>
					            <f:facet name="footer">
					            	<h:outputText value="#{financiamientoController.footerImp.totMonto}">
							        	<f:convertNumber pattern="#,##0" locale="US"/>
							        </h:outputText>
					            </f:facet> 
					            <h:outputText value="#{document.totMonto}">
					            	<f:convertNumber pattern="#,##0" locale="US"/>
					            </h:outputText>
					        </p:column>
					    </p:treeTable>
						<p:spacer width="10" height="10"></p:spacer>
						<p:treeTable value="#{financiamientoController.rootExp}" var="document">						  
					        <p:column style="width:330px">
					            <f:facet name="header">Clase</f:facet>
					            <f:facet name="footer">Total (Export)</f:facet>  
					            <h:outputText value="#{document.descClase}" styleClass="columnTextoCeleste"/>  
					        </p:column>  
					        <p:column style="width:70px;" styleClass="columnNumero">  
					            <f:facet name="header"># Oper</f:facet>
					            <f:facet name="footer">
					            	<h:outputText value="#{financiamientoController.footerExp.totOper}">
							    		<f:convertNumber pattern="#,##0" locale="US"/>
							    	</h:outputText>  
					            </f:facet>
					            <h:outputText value="#{document.totOper}">
							    	<f:convertNumber pattern="#,##0" locale="US"/>
							    </h:outputText>    
					        </p:column>  
					        <p:column style="width:100px;" styleClass="columnNumero">  
					            <f:facet name="header">Monto</f:facet>
					            <f:facet name="footer">
					            	<h:outputText value="#{financiamientoController.footerExp.totMonto}">
							        	<f:convertNumber pattern="#,##0" locale="US"/>
							        </h:outputText>  
					            </f:facet> 
					            <h:outputText value="#{document.totMonto}">
					            	<f:convertNumber pattern="#,##0" locale="US"/>
					            </h:outputText>
					        </p:column>
					    </p:treeTable>
					    <t:div>
							<div class="ui-treetable ui-widget">
								<table border="0">
									<thead>
										<tr role="row">
											<th class="ui-state-default" role="columnheader" style="width: 250px;"><div class="ui-tt-c"></div></th>
											<th class="ui-state-default" role="columnheader" style="width: 70px; text-align: center"><div class="ui-tt-c"># Oper</div></th>
											<th class="ui-state-default" role="columnheader" style="width: 100px; text-align: center"><div class="ui-tt-c">Monto</div></th>
										</tr>
									</thead>
									<tbody class="ui-treetable-data ui-widget-content">
										<tr class="ui-widget-content default" role="row">
											<td role="gridcell" style="text-align: right">
												<div class="ui-tt-c"><span class="columnNumero">Total (Import + Export)</span></div>
											</td>
											<td role="gridcell" style="text-align: right"><div class="ui-tt-c"><span class="columnNumero">
												<h:outputText value="#{financiamientoController.footerImpExp.totOper}">
										        	<f:convertNumber pattern="#,##0" locale="US"/>
										        </h:outputText></span></div>
											</td>
											<td role="gridcell" style="text-align: right"><div class="ui-tt-c"><span class="columnNumero">
												<h:outputText value="#{financiamientoController.footerImpExp.totMonto}">
										        	<f:convertNumber pattern="#,##0" locale="US"/>
										        </h:outputText></span></div>
										    </td>
										</tr>
									</tbody>
							    </table>
						    </div>
					    </t:div>
					    <p:spacer width="10" height="10"></p:spacer>
					</h:panelGrid>
				</p:tab>
				<p:tab title="Detalle de Operaciones">
					<p:dataTable value="#{financiamientoController.listFinanciamientoDetalle}"
						var="fila" paginator="true" rows="10" id="tabDetOper"
						rowIndexVar="rowIndex"
						rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'styleDataTableRowColorClaro' : 'styleDataTableRowColorOscuro'}">
						
						<p:column styleClass="columnCenter">
							<f:facet name="header">
								<h:outputText value="Fecha Desem." />
							</f:facet>
							<h:outputText value="#{fila.dFecDesembolso}">
								<f:convertDateTime pattern="dd-MM-yyyy" />
							</h:outputText>
						</p:column>
						<p:column styleClass="columnCenter columnTextoCeleste">
							<f:facet name="header">
								<h:outputText value="Nro. Operación" />
							</f:facet>
							<p:commandLink actionListener="#{modalProductoController.cargarDatoModalFinancDet(fila.idOper)}" oncomplete="popFinanciamiento.show()" update=":modalFinanciamiento" >
								<h:outputText rendered="#{fila.codProductoMT == '005'}" value="#{fila.codContratoR}" styleClass="columnTextoCeleste" />
							</p:commandLink>
							
							<p:commandLink actionListener="#{modalProductoController.cargarDatoModalFinancDet(fila.idOper)}" oncomplete="popFinanciamiento.show()" update=":modalFinanciamiento" >
								<h:outputText rendered="#{fila.codProductoMT == '006'}" value="#{fila.codContratoR}" styleClass="columnTextoCeleste" />
							</p:commandLink>
						</p:column>
						<p:column styleClass="columnCenter">
							<f:facet name="header">
								<h:outputText value="Tipo" />
							</f:facet>
							<h:outputText value="#{fila.tipo}" />
						</p:column>
						<p:column width="140">
							<f:facet name="header">
								<h:outputText value="Cliente" />
							</f:facet>
							<h:outputText value="#{fila.cliente}" />
						</p:column>
						<p:column width="140">
							<f:facet name="header">
								<h:outputText value="Empresa Extranjera" />
							</f:facet>
							<h:outputText value="#{fila.empresaExt}" />
						</p:column>
						<p:column styleClass="columnCenter">
							<f:facet name="header">
								<h:outputText value="Mon" />
							</f:facet>
							<h:outputText value="#{fila.moneda}" />
						</p:column>
						<p:column styleClass="columnNumero">
							<f:facet name="header">
								<h:outputText value="Importe USD" />
							</f:facet>
							<h:outputText value="#{fila.importeUsd}">
								<f:convertNumber pattern="#,##0.00" locale="US"/>
							</h:outputText>
						</p:column>
						<p:column styleClass="columnCenter">
							<f:facet name="header">
								<h:outputText value="Prox. Vcto" />
							</f:facet>
							<h:outputText value="#{fila.dProxVcto}" rendered="#{comunController.validarColorFecha(fila.proxVcto,'0')}">
								<f:convertDateTime pattern="dd-MM-yyyy" />
							</h:outputText>
							<h:outputText value="#{fila.dProxVcto}" rendered="#{comunController.validarColorFecha(fila.proxVcto,'1')}" styleClass="textoRojo">
								<f:convertDateTime pattern="dd-MM-yyyy" />
							</h:outputText>
						</p:column>
						<p:column styleClass="columnNumero">
							<f:facet name="header">
								<h:outputText value="Plazo" />
							</f:facet>
							<h:outputText value="#{fila.plazo}" />
						</p:column>
						<p:column styleClass="columnNumero">
							<f:facet name="header">
								<h:outputText value="Tasa" />
							</f:facet>
							<h:outputText value="#{fila.tasa}" />
						</p:column>
						<p:column styleClass="columnCenter">
							<f:facet name="header">
								<h:outputText value="#Cuotas" />
							</f:facet>
							<h:outputText value="#{fila.nroCuotas}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Pais" />
							</f:facet>
							<h:outputText value="#{fila.pais}" styleClass="columnCenter" />
						</p:column>
					</p:dataTable>
				</p:tab>
			</p:accordionPanel>
		</ui:define>
		<ui:define name="extraarea">
			<ui:include src="/pages/producto/include/popFinanciamiento.xhtml" />
			<ui:include src="/pages/producto/include/popDetalleLiquidacion.xhtml" />
		</ui:define>
	</ui:composition>
</jsp:root>